// vuex的配置文件，这里用来管理那些公用的数据。这些数据放在哪个组件中都不合适，所以就放在vuex的store种，全局使用。
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

import http from '../axios' // 自己的axios
import mutations from './mutations'
import modules from './modules'
// 解决vuex刷新后状态初始化的问题--通过本地存储解决
// 判断一下 如果设备上没有初始化数据，就先初始化；已经有数据了就跳过
if (!JSON.parse(localStorage.getItem('store'))) {
    localStorage.setItem('store', JSON.stringify({
        age: 18,
        money: 1,
        hobby: ['唱', '跳', 'rap', '打篮球']
    }))
}
// 每次刷新时 读取本地数据 赋值给vuex
let state = JSON.parse(localStorage.getItem('store')) || {}

// 实例化 得到一个仓库,仓库用来存数据
const store = new Vuex.Store({
    state: state
    // state: { // 类似组件中的data 作用是存储数据 初始化数据  SSOT 单一数据源
    //     age: 18,
    //     money: 1,
    //     hobby: [
    //         '唱','跳','rap','打篮球'
    //     ]
    // }
    ,
    // getters: { // 类似组件中的计算属性--依赖缓存，当原始数据没有变化时 无论调用几次 只执行一次
    //     // 和计算属性一样 在原始数据的基础上 计算得到一个额外的值 不修改原数据
    //     nextAge(state) {
    //         console.log(777);
    //         return state.age + 1
    //     }
    // },
    // ========= 以上都是获取数据 以下开始修改数据 =========
    mutations ,// 修改数据唯一的正确途径，类似组件中的methods
    actions: {
        // action = mutation + axios  封装程度更高 下次写同样业务时直接调用action
        savePlayA({ commit }) {
            // action中可以包含异步
            // mutation不能发请求 action可以发请求
            http('/play/category')
                .then(res => {
                    //  到了log这一步 就已经是同步了 可以使用mutation了 
                    // vuex的约定是不能在mutation中使用异步 但是可以在异步函数中使用mutation 
                    console.log(res);
                    commit('savePlay', res)
                })
        }
    },
    // 模块化管理 按照业务模块划分
    modules
})

export default store
